<template>
    <view class="globe_back">
        <view class="box">
            <view>
                <view :class="Tabindex == item.id ? 'active' : 'tab'" @click="tab(item.id)" v-for="item in tabtext">{{ item.name }}</view>
            </view>
            <view class="income">
                <view>
                    <text class="mintitle">收益统计</text>
                    <text class="time">统计时间：2022-12-02 12：01:25</text>
                </view>
                <view class="flex justify_content_between data">
                    <view class="flex_1">
                        <text class="todayMoney">今日收益(元)</text>
                        <br />
                        <text class="money">12500.00</text>
                    </view>
                    <view class="h">|</view>
                    <view class="flex_1">
                        <view class="allDay">
                            昨日全天：
                            <text class="alldayMoney">￥20121.00</text>
                        </view>
                        <view class="allDay">
                            昨日此刻：
                            <text class="alldayMoney">￥512.00</text>
                        </view>
                    </view>
                </view>
                <view class="order flex flex_wrap">
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">支付人数</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">订单数(笔)</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">客单价(元)</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">待入账(元)</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">待支付</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">待发货</view>
                    </view>
                </view>
                <view class="charts-box">
                    <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
                </view>
            </view>
            <!-- 售后统计 -->
            <view class="income">
                <view>
                    <text class="mintitle">售后统计</text>
                    <text class="time">统计时间：2022-12-02 12：01:25</text>
                </view>
                <view class="flex justify_content_between data">
                    <view class="flex_1">
                        <text class="todayMoney">今日退款(元)</text>
                        <br />
                        <text class="money">12500.00</text>
                    </view>
                    <view class="h">|</view>
                    <view class="flex_1">
                        <view class="allDay">
                            昨日全天：
                            <text class="alldayMoney">￥20121.00</text>
                        </view>
                        <view class="allDay">
                            昨日此刻：
                            <text class="alldayMoney">￥512.00</text>
                        </view>
                    </view>
                </view>
                <view class="order flex flex_wrap">
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">退款人数</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">订单数(笔)</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">客单价(元)</view>
                    </view>
                    <view class="orderList">
                        <view class="num">120</view>
                        <view class="text">待退款(元)</view>
                    </view>
                </view>
                <view class="charts-box">
                    <qiun-data-charts type="line" :opts="opts" :chartData="deductionData" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            Tabindex: 0,
            tabtext: [
                {
                    name: '今日',
                    id: 0
                },
                {
                    name: '本月',
                    id: 1
                },
                {
                    name: '全部',
                    id: 2
                }
            ],
            chartData: {},
            deductionData: {},
            opts: {
                color: ['#3377FF', '#5CE500', '#FF6401'],
                padding: [15, 10, 0, 15],
                enableScroll: false,
                legend: {},
                xAxis: {
                    disableGrid: true
                },
                yAxis: {
                    gridType: 'dash',
                    dashLength: 2
                },
                extra: {
                    line: {
                        type: 'curve',
                        width: 2,
                        activeType: 'hollow'
                    }
                }
            }
        };
    },
    onReady() {
        this.getServerData();
        this.getDeductionData();
    },
    methods: {
        getServerData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                let res = {
                    categories: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
                    series: [
                        {
                            name: '订单金额',
                            lineType: 'dash',
                            data: [35, 8, 25, 37, 4, 20]
                        },
                        {
                            name: '支付人数',
                            data: [70, 40, 65, 100, 44, 68]
                        },
                        {
                            name: '订单数',
                            data: [100, 80, 95, 150, 112, 132]
                        }
                    ]
                };
                this.chartData = JSON.parse(JSON.stringify(res));
            }, 500);
        },
        getDeductionData() {
            //模拟从服务器获取数据时的延时
            setTimeout(() => {
                //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
                let res = {
                    categories: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
                    series: [
                        {
                            name: '退款金额',
                            lineType: 'dash',
                            data: [200, 15, 25, 37, 4, 20]
                        },
                        {
                            name: '退款人数',
                            data: [70, 40, 65, 100, 44, 68]
                        },
                        {
                            name: '订单数',
                            data: [100, 80, 95, 150, 112, 132]
                        }
                    ]
                };
                this.deductionData = JSON.parse(JSON.stringify(res));
            }, 500);
        },
        tab(e) {
            console.log(e);
            this.Tabindex = e;
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
}
.tab {
    width: 88rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    background: #f7f7f7;
    color: #666b75;
    font-size: 28rpx;
    display: inline-block;
    border-radius: 8rpx;
}
.active {
    width: 88rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin: 1rpx 0;
    text-align: center;
    color: #00091a;
    background: white;
    font-size: 28rpx;
    display: inline-block;
    border-radius: 8rpx;
}
.income {
    background: white;
    padding: 32rpx;
    margin-top: 36rpx;
}
.data {
    background: #f7faff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-top: 24rpx;
}
.todayMoney {
    color: #999ca3;
    font-size: 24rpx;
}
.money {
    font-size: 40rpx;
    font-weight: bold;
    color: #00091a;
    padding-top: 16rpx;
    display: block;
}
.mintitle {
    color: #00091a;
    font-size: 28rpx;
    font-weight: bold;
}
.time {
    color: #ccced1;
    font-size: 24rpx;
    margin-left: 8rpx;
}
.allDay {
    color: #999ca3;
    font-size: 24rpx;
    padding-top: 8rpx;
    padding-bottom: 16rpx;
}
.alldayMoney {
    color: #333a47;
    font-size: 24rpx;
}
.h {
    line-height: 100rpx;
    color: #ccced1;
    padding: 0 16rpx;
}
.order {
    text-align: center;
    margin: 24rpx 0;
    .orderList {
        width: 33%;
        margin-top: 24rpx;
    }
    .num {
        color: #00091a;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
    }
    .text {
        color: #999ca3;
        font-size: 24rpx;
    }
}
</style>
